<template>
  <a-form class="query-form" ref="formRef" v-bind="form">
    <a-row type="flex" :gutter="gutter">
      <a-col
        :span="24 / span"
        v-for="(formItem, index) in startFormItems"
        :key="index"
      >
        <FormItem :size="size" :option="formItem" :form-model="form.model" />
      </a-col>
      <template v-if="extraFormItems && fold">
        <a-col
          :span="24 / span"
          v-for="(formItem, index) in extraFormItems"
          :key="index"
        >
          <FormItem :size="size" :option="formItem" :form-model="form.model" />
        </a-col>
      </template>
      <a-col flex="auto" class="query-form__last-options">
        <a-space>
          <Simbtn
            icon="undo-outlined"
            text="重置"
            :size="size"
            @click="onReset"
          />
          <Simbtn
            icon="search-outlined"
            text="查询"
            type="primary"
            :size="size"
            @click="onQuery"
            :loading="loading"
          />
          <a-button
            v-if="extraFormItems"
            type="link"
            :size="size === 'default' ? 'middle' : size"
            @click="fold = !fold"
          >
            <span>{{ fold ? '收起' : '展开' }}</span>
            <UpOutlined :rotate="fold ? 0 : 180" />
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { FormItem } from '@/components/Form'
import { Simbtn } from '@/components/Button'

import type { FormActionType, FormProps, FormItemOption } from '../types'

const props = withDefaults(
  defineProps<{
    form: FormProps
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    formItemList: FormItemOption<any>[]
    /** 尺寸 */
    size?: 'large' | 'default' | 'small'
    /** 查询的loading状态 */
    loading?: boolean
    /** 指定查询表单列数 */
    span?: number
  }>(),
  {
    loading: false,
    span: 4,
    size: 'default',
  }
)

const emit = defineEmits<{
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  <T = any>(e: 'query', value: T): void
}>()

const fold = ref(false)
// eslint-disable-next-line no-undef
const formRef = ref<Nullable<FormActionType>>(null)

const gutter = computed(() => {
  if (props.size === 'small') {
    return [0, 0]
  }
  return [0, 16]
})

/**
 * 常展示部分表单
 */
const startFormItems = computed(() => {
  if (props.formItemList.length > props.span * 2 - 1) {
    return props.formItemList.slice(0, props.span * 2 - 1)
  }
  return props.formItemList
})

/**
 * 隐藏部分表单
 */
const extraFormItems = computed(() => {
  if (props.formItemList.length > props.span * 2 - 1) {
    return props.formItemList.slice(props.span * 2 - 1)
  }
  return null
})

const onReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

const onQuery = () => {
  emit('query', props.form.model)
}
</script>

<style lang="scss" scoped>
@include b(query-form) {
  @include e(last-options) {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss">
.query-form {
  .ant-form-item {
    margin-bottom: 0px;
  }
}
</style>
